<template>
  <el-dialog
    v-model="store.isVisible"
    :title="t('Plugin library')"
    width="800px"
    @close="store.hide()"
  >
    <el-row :gutter="8">
      <!-- 左侧插件列表 -->
      <el-col :span="8">
        <el-row>
          <el-col :span="24">
            <el-input
              v-model="store.searchKey"
              :placeholder="t('Search')"
              spellcheck="false"
            />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-scrollbar height="540px">
              <el-menu
                :default-active="store.selectedPluginId"
                @select="store.selectPlugin"
                style="border: none;"
              >
                <el-menu-item
                  v-for="plugin in store.filteredPlugins"
                  :key="plugin.id"
                  :index="plugin.id"
                  class="plugin-item"
                >
                  <span>
                    {{ plugin.name }}
                    <el-text v-if="!store.isPluginPackOK(plugin)" type="danger" size="small">
                      ({{ plugin.error }})
                    </el-text>
                  </span>
                </el-menu-item>
              </el-menu>
            </el-scrollbar>
          </el-col>
        </el-row>
      </el-col>
      
      <!-- 右侧插件信息 -->
      <el-col :span="16">
        <el-card>
          <!-- Enable checkbox -->
          <el-row style="align-items: center;">
            <el-col :span="24">
              <el-checkbox
                v-model="store.enableCheck"
                @change="store.togglePluginStatus"
              >
                {{ t('Enable') }}
              </el-checkbox>
            </el-col>
          </el-row>

          <el-divider style="margin: 8px 0;" />

          <!-- ID -->
          <el-row :gutter="8" style="align-items: center;">
            <el-col :span="4">
              <label>{{ t('ID') }}:</label>
            </el-col>
            <el-col :span="20">
              <span>{{ store.selectedPlugin?.id || '---' }}</span>
            </el-col>
          </el-row>

          <!-- Version -->
          <el-row :gutter="8" style="align-items: center;">
            <el-col :span="4">
              <label>{{ t('Version') }}:</label>
            </el-col>
            <el-col :span="20">
              <span>{{ store.selectedPlugin?.version || '---' }}</span>
            </el-col>
          </el-row>

          <!-- Brief -->
          <el-row>
            <el-col :span="24">
              <label>{{ t('Brief') }}:</label>
            </el-col>
            <el-col :span="24">
              <el-input
                type="textarea"
                :model-value="store.selectedPlugin?.brief || ''"
                :rows="3"
                readonly
                resize="none"
              />
            </el-col>
          </el-row>

          <!-- Application layer -->
          <el-row>
            <el-col :span="24">
              <label>{{ t('Application layer') }}:</label>
            </el-col>
            <el-col :span="24">
              <el-input
                type="textarea"
                :model-value="store.selectedPlugin?.appLayerDetails || ''"
                :rows="6"
                readonly
                resize="none"
                spellcheck="false"
              />
            </el-col>
          </el-row>

          <!-- Native layer -->
          <el-row>
            <el-col :span="24">
              <label>{{ t('Native layer') }}:</label>
            </el-col>
            <el-col :span="24">
              <el-input
                type="textarea"
                :model-value="store.selectedPlugin?.nativeLayerDetails || ''"
                :rows="6"
                readonly
                resize="none"
                spellcheck="false"
              />
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script setup>
import { onMounted } from 'vue'
import { usePluginLibraryStore } from '@/stores/pluginLibrary'
import { useLanguageStore } from '@/stores/language'

const store = usePluginLibraryStore()
const languageStore = useLanguageStore()

onMounted(async () => {
  await store.initialize()
})

// 翻译函数
const t = (key) => {
  const translations = {
    'Plugin library': {
      'en': 'Plugin library',
      'zh': '插件库'
    },
    'Search': {
      'en': 'Search',
      'zh': '搜索'
    },
    'Enable': {
      'en': 'Enable',
      'zh': '启用'
    },
    'ID': {
      'en': 'ID',
      'zh': 'ID'
    },
    'Version': {
      'en': 'Version',
      'zh': '版本'
    },
    'Brief': {
      'en': 'Brief',
      'zh': '简介'
    },
    'Application layer': {
      'en': 'Application layer',
      'zh': '应用层'
    },
    'Native layer': {
      'en': 'Native layer',
      'zh': '原生层'
    }
  }
  return translations[key]?.[languageStore.isChinese ? 'zh' : 'en'] || key
}
</script>

<style scoped>
.plugin-item {
  height: auto;
  line-height: 1.4;
  padding: 8px;
}
</style>